<template>
  <div class="add">
    <BaseDialog
      :title="$t('字段集')"
      width="1000px"
      v-model:visible="innerVisible"
      :renderDefaultFooter="false"
    >
      <MyForm
        v-model:formData="formData"
        v-model:columns="formColumns"
        :rules="rules"
        :labelWidth="72"
        background="#fff"
        @submit="onSubmit"
        @cancel="innerVisible = false"
      >
      </MyForm>
    </BaseDialog>
  </div>
</template>
<script setup lang="tsx">
import { ref, computed, onMounted } from "vue";
import i18n from "@/lang/index.js";
const props = defineProps({
  visible: {
    type: Boolean,
  },
  fieldList: {
    type: Array,
    default: () => [],
  },
});
const emits = defineEmits(["update:visible", "onSubmit"]);
const innerVisible = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emits("update:visible", val);
  },
});
const formData = ref({
  fieldList: [],
});
const formColumns = ref([
  {
    title: "",
    structure: [
      {
        type: "tabel",
        tableId: "fieldList",
        tableIndex: 0,
        prop: "fieldList",
        keepSourceKey: "fieldName",
        height: 400,
        columns: [
          {
            type: "checkbox",
            width: 50,
            fixed: "left",
            align: "center",
          },
          {
            title: "字段名称",
            field: "fieldName",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            title: "字段编码",
            field: "fieldCode",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            title: "字段类型",
            field: "type",
            editRender: {},
            params: {
              options: [
                { label: "字段", value: "1" },
                // { label: "集合", value: "2" },
              ],
              transfer: true,
            },
            slots: { edit: "select_edit" },
            formatter: ({ cellValue }) => {
              const obj = {
                1: "字段",
                2: "集合",
              };
              return obj[cellValue] || "";
            },
          },
          {
            field: "remark",
            editRender: {},
            slots: { edit: "input_edit" },
            title: "备注",
          },
        ],
        editRules: {
          fieldName: [
            {
              required: true,
              message: i18n.global.t("请输入字段名称"),
              trigger: ["blur"],
            },
          ],
          fieldCode: [
            {
              required: true,
              message: i18n.global.t("请输入字段编码"),
              trigger: ["blur"],
            },
          ],
          type: [
            {
              required: true,
              message: i18n.global.t("请选择字段类型"),
              trigger: ["blur"],
            },
          ],
        },
        multipleSelection: [],
        buttonType: ["add", "delete"],
        batchDelete: true,
      },
    ],
    hide: false,
  },
]);
const rules = ref({});
onMounted(() => {
  formData.value.fieldList = [...props.fieldList];
});

const onSubmit = () => {
    emits("onSubmit", formData.value.fieldList);
};
</script>
<style lang="scss" scoped>
.search-btn {
  width: 120px;
  margin: 20px auto 0;
}
</style>
